<template>
	<div class="hot_list">
        <!-- 顶部 -->
        <div class="hot_top">
            <img src="https://p1.music.126.net/GhhuF6Ep5Tq9IEvLsyCN7w==/18708190348409091.jpg" alt="">
        </div>
        <!-- 列表 -->
        <div class="box">
            <div class="item" v-for="(song,index) of hotList" :key="index">
                <div class="num">{{ index>=9 ? index + 1 : '0' + (index + 1) }}</div>
                <div class="info">
                    <div class="song">{{ song.name }}</div>
                    <div class="singer">
                        <span v-for="singer of song.ar" :key="singer.id">{{ singer.name }}</span>
                    </div>
                </div>
                <div class="icon"></div>
            </div>
        </div>
        <!-- 加载更多 -->
        <div class="more" @click="loadMore">点击加载更多</div>
	</div>
</template>
   
<script>
export default {
	data() {
		return {
            hotList: [],
            songNumber:10
		}
	},
	mounted() {
		this.getSong(10)
    },
    methods: {
        loadMore(){
            this.songNumber += 10;
            this.getSong(this.songNumber)
        },
        getSong(option){
            this.$axios.get('/music/playlist/detail?id=3778678', {       // 还可以直接把参数拼接在url后边
                params: {
                    // title:'眼镜'
                }
            }).then((res) => {
                console.log(res)
                this.hotList = res.data.playlist.tracks.slice(0,option);
            }).catch((error) => {
                console.log(error);
            });
        }
    },
}
</script>
   
<style scoped>
    .hot_top{
        height: 3.6rem;
    }
    .hot_top img{
        width: 100%;
        height: 100%;
    }
    .box{
        font-size: .32rem;
    }
    .item{
        display: flex;
        height: 1.4rem;
        align-items: center;
    }
    .box .item:nth-of-type(1) .num,
    .box .item:nth-of-type(2) .num,
    .box .item:nth-of-type(3) .num{
        color: #f00;
        
    }
    .num{
        margin: 0 .3rem;
        font-size: .36rem;
    }
    .song{
        font-size: .36rem;
    }
    .singer{
        color: #999;
        font-size: .28rem;
    }
    .info{flex: 1;}
    .item .icon{
        margin-right: .4rem;
        width: 22px;
        height: 22px;
        border: none;
        background-image: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=);
        background-position: -24px 0;
        background-size: 166px 97px;
        border-radius: 50%;
    }
    .more{
        height: .8rem;
        background: rgb(243, 242, 242);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .32rem;
    }
</style>